<template>
<template>
	<view style="padding: 20rpx 20rpx; background-color:#f6fafd ;" class="container">
		<view class="header content" style="">
			<image :src="teamDoctorData.avatar" mode="" style="margin-left: 30rpx;"></image>
			<view class="team-information"
				style="margin-left: 20rpx; height: 220rpx; display: flex; flex-direction: column; justify-content: space-between;">
				<text class="title">{{teamDoctorData.name}}</text>
				<view class="institution">
					<text>所属机构：</text>
					<text>{{teamDoctorData.organizationId?.name}}</text>
				</view>
				<view class="institution">
					<text>签约人数：</text>
					<text style="color:#2984F8;;">{{teamDoctorData.signNumber}}</text>
				</view>
				<view style="display: flex; align-items: center; margin-top: 10rpx;">
					<uni-rate :readonly="true" :value="teamDoctorData.rate"></uni-rate>
					<text style="font-size: 24rpx; color:#FDDB78; ;">{{teamDoctorData.rate}}</text>
				</view>
			</view>
		</view>

		<view style="display: flex; margin-left: 30rpx;">
			<view class="tag" v-for="item in teamDoctorData.tagIds" :key="item._id">
				<uni-tag :text="item.name" type="primary" />
			</view>
		</view>


		<!-- //领队渲染 -->
		<view class="doctor" style="margin-left: 30rpx; margin-right: 30rpx;">
			<text style="font-size: 36rpx; margin: 20rpx 0;">团队医生</text>
			<view class="doctor-detail" @click="todoctor(detailData._id)"
				style="height: 200rpx; width: 640rpx; margin-bottom: 40rpx;">
				<view style="display: flex; align-items: center;">
					<image :src="detailData.avatar" mode=""
						style="width: 128rpx; height: 128rpx; margin-right: 40rpx; margin-left: 40rpx;" />
					<view
						style="text-align: left; height: 116rpx; display: flex; flex-direction: column; justify-content: space-between;">
						<view style="display: flex; align-items:flex-end; ">
							<text style="margin-right: 10rpx;">{{detailData.name}}</text>
							<text
								style=" font-style: normal;  width: 96rpx;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   font-weight: 400; margin-left: 15rpx;font-size: 12px;color: #999999;">{{detailData.roleId?.name}}</text>
						</view>
						<view>
							<view style=" font-style: normal;    font-weight: 400;  font-size: 12px; color: #999999;  ">
								签约人数：
								<text
									style=" font-style: normal;    font-weight: 400;  font-size: 12px; color: #2984F8; ">{{detailData.signNumber}}</text>
							</view>
						</view>
					</view>
					<view
						style="width: 126rpx; height: 62rpx; border-radius: 12rpx; justify-content: center; align-items: center;  display: flex;  background-color: rgba(41, 132, 248, 1); margin-left: 60rpx; margin-top: 40rpx;">
						<text style="font-size: 28rpx;color: #FFFFFF;">签约</text>
					</view>
				</view>
			</view>
		</view>
		<!-- //医生渲染 -->
		<view class="doctor" v-if="teamData" v-for="item in teamData" style="margin-left: 30rpx; margin-right: 30rpx;">
			<view class="doctor-detail" @click="todoctor(detailData._id)"
				style="height: 200rpx; width: 640rpx; margin-bottom: 40rpx;">

				<view style="display: flex; align-items: center;">
					<image :src="item.avatar" mode=""
						style="width: 128rpx; height: 128rpx; margin-right: 40rpx; margin-left: 40rpx;" />
					<view
						style="text-align: left; height: 116rpx; display: flex; flex-direction: column; justify-content: space-between;">
						<view style="display: flex; align-items:flex-end; ">
							<text style="margin-right: 10rpx;">{{item.name}}</text>
							<text
								style=" font-style: normal;  width: 96rpx;   white-space: nowrap; 
					overflow: hidden; 
					text-overflow: ellipsis;   font-weight: 400; margin-left: 15rpx;font-size: 12px;color: #999999;">{{item.roleId?.name}}</text>
						</view>
						<view>
							<view style=" font-style: normal;    font-weight: 400;  font-size: 12px; color: #999999;  ">签约人数：
							<text style=" font-style: normal;    font-weight: 400;  font-size: 12px; color: #2984F8;  ">{{item.signNumber}}</text>
							</view>
						</view>
					</view>
					<view
						style="width: 126rpx; height: 62rpx; border-radius: 12rpx; justify-content: center; align-items: center;  display: flex;  background-color: rgba(41, 132, 248, 1); margin-left: 60rpx; margin-top: 40rpx;">

						<text style="font-size: 28rpx;color: #FFFFFF;">签约</text>
					</view>
				</view>
			</view>
		</view>




		<view v-if="signItem.length>0" style="
			font-style: normal;
			font-size: 38rpx;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			margin-left: 30rpx;
			">
			服务包
		</view>
		<view v-for="item in signItem" :key="item._id" class="sign-box-1" @click="toOrder(item._id)">
			<image :src="item.image" mode=""
				style="width: 160rpx; height: 120rpx;margin-right: 40rpx;   flex-shrink: 0; ">
			</image>
			<view
				style="display: flex; flex-direction: column; text-align: left; justify-content: space-between; height: 120rpx;">
				<view
					style="display: flex;align-items: center;justify-content: space-between; width: 380rpx;   border-radius:20rpx;">
					<text>{{item.name}}</text>
					<text style="font-style: normal;color: #FA746B;line-height: 56rpx;">￥{{item.price}}</text>
				</view>
				<view style="display: flex;" v-for="tag in item.tagIds" :key="tag._id">
					<uni-tag :text="tag.name" size="mini" :circle="true" type="error"></uni-tag>
				</view>
			</view>
		</view>


		<view class="sticky-btn-wrap" @click="toApplySign">
			<view class="apply-btn">申请签约</view>

		</view>
	</view>

	<!-- 未实名 -->
	<uni-popup ref="checkRef" :animation="false" type="center" border-radius="100px 100px 0 0"
		style="text-align: center;">
		<view class="pop-center">
			<view class="pop-tip">
				尚未登记实名信息，是否前往完善？
			</view>
			<view class="pop-done">
				<view style="color: #999;" @click="closeCheck">取消</view>
				<view style="color: #2984f8;" @click="chooCheck">确认</view>
			</view>
		</view>
	</uni-popup>
</template>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		contractedTeamApi,
		fetchTeamDetailApi,
		getServicePacksTeamApi,
		memberDataApi
	} from '../../../api/teamDoctor.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useUserStore
	} from '../../../store/user.js';
	// import {
	// 	getServicePacksApi
	// } from '../../../api/sign.js';
	const userstore = useUserStore()


	const checkRef = ref(null)
	// 打开确认
	function openCheck() {
		checkRef.value.open()
	}
	// 点击确认
	function chooCheck(data) {
		uni.navigateTo({
			url: '/HealthHeadlinesPackage/pages/newHealthRecord/newHealthRecord'
		})
		checkRef.value.close()
	}


	const todoctor = (_id) => {

		if (_id) {
			uni.navigateTo({
				url: `/minePackage/pages/doctor-details/doctor-details?_id=${_id}`
			})
		}
	}
	// 点击医生的签约保存医生的id
	const toSign = (item) => {
		console.log(item);
		console.log('医生的id？是吗', item._id);
		console.log('医生的id？是吗', item.name);
		uni.setStorageSync('doctorId', item._id)
		uni.setStorageSync('doctorName', item.name)
		// 跳转到签约页面
		uni.navigateTo({
			url: '/minePackage/pages/apply-sign/apply-sign'
		})
	}
	//全部团队
	const teamDoctorData = ref({})
	//获取团队id
	const doctorData = ref({})
	//获取医生ID
	const IdDoctor = ref({})
	//领队数据
	const detailData = ref({})

	const teamData = ref({})
	// 服务包
	const signItem = ref([]);









	//医生团队数据
	function teamDoctor(_id) {
		contractedTeamApi({
			residentId: userstore.userInfo._id
		}).then((res) => {
			if (res.code == 200) {

				doctorData.value._id = res.data[0]?._id

				console.log(res.data, '全部医生的数据？？？');
				doctorData.value._id = res.data[0]._id

				console.log(doctorData.value);
			}
		})
	}

	watch(
		doctorData,
		(newValue) => {
			if (newValue?._id) {
				fetchTeamDetail()
				memberData()
			}
		}, {
			deep: true,
			immediate: true
		}
	)
	//获取团队详情
	async function fetchTeamDetail(options) {
		console.log(options?._id, 123);
		const res = await fetchTeamDetailApi({
			_id: options?._id
		})
		if (res.code == 200) {
			console.log(res.data);
			teamDoctorData.value = res.data
			IdDoctor.value = res.data._id
			//领队数据
			detailData.value = res.data.leaderId

		}
	}



	//医生

	//医生 团队的数据

	function memberData(options) {
		memberDataApi({
			_id: options?._id
		}).then(res => {
			if (res.code == 200) {
				console.log(res.data);
				teamData.value = res.data
			}
		})
	}
	onLoad((options) => {
		memberData(options)
		teamDoctor()
		getServicePacks(options._id)
		fetchTeamDetail(options)
	})
	// 服务包
	function getServicePacks(_id) {
		getServicePacksTeamApi({
			_id: _id
		}).then(res => {
			if (res.code == 200) {
				signItem.value = res.data;

			}
		})





	}

	function toOrder(_id) {
		uni.navigateTo({
			url: '/SignPackage/pages/order-service-package/order-service-package?_id=' + _id
		})
	}


	const toApplySign = () => {
		uni.removeStorageSync('doctorId')
		uni.removeStorageSync('doctorName')
		uni.navigateTo({
			url: '/minePackage/pages/apply-sign/apply-sign'
		})
	}
</script>

<style scoped lang="scss">
	.header {
		display: flex;

		margin-top: 20rpx;

		image {
			width: 220rpx;
			height: 220rpx;
		}

		.team-information {
			.title {
				font-size: 36rpx;
				color: #333;
			}

			.institution {
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}
	}

	.tag {
		width: 160rpx;
		height: 64rpx;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}

	.doctor {
		width: 670rpx;
		margin: auto;
		border-radius: 20rpx;
	}

	.doctor-detail {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 30rpx;

		image {
			width: 128rpx;
			height: 128rpx;
		}
	}

	.sign-box-1 {

		height: 200rpx;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		margin: 40rpx 30rpx 40rpx;
		padding-right: 40rpx;
		padding-left: 40rpx;
		border-radius: 30rpx;
	}




	.container {
		position: relative;
		/* 确保内部fixed元素相对此容器定位 */
		min-height: 100vh;
		/* 至少占满屏幕高度 */
		padding-bottom: 140rpx !important;
	}



	.sticky-btn-wrap {

		position: fixed;
		/* 固定定位 */

		bottom: 40rpx;
		/* 距离底部20px */
		left: 0;
		right: 0;
		width: 80%;
		/* 按钮宽度 */
		margin: 0 auto;
		/* 水平居中 */
	}

	.apply-btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;

		bottom: 0;
		/* 距离底部20px */
		left: 0;
		right: 0;
		width: 100%;
		height: 160rpx;
		/* 按钮宽度 */
		// margin: 0 auto;
		/* 水平居中 */
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.apply-btn {
		width: 670rpx;
		height: 88rpx;
		line-height: 88rpx;

		text-align: center;
		background-color: #409EFF;
		color: #fff;
		font-size: 32rpx;

		border-radius: 16px;
		border: none;

		border-radius: 20rpx;

	}
</style>